<template>
  <div id="sys" ref="sys">
    <div id="app" class="app">
      <router-view class="main"></router-view>
    </div>
  </div>
</template>
<script>
import SizeAdapt from '@/assets/js/app/utils/SizeAdapt.js'
import partServer from '@/assets/js/app/utils/partServer'

export default {
  data() {
    return {
      pageAdapt: null,
      pageSize: {
        width: 1920,
        height: 1080
      }
    }
  },
  created() {
    partServer.init(this)
  },
  computed: {},
  mounted() {
    this.init()
    // 自适应页面
    this.pageAdapt = new SizeAdapt({
      wrapSelector: '#sys',
      domSelector: '#app',
      sizeEqualRatio: true,
      w: this.pageSize.width,
      h: this.pageSize.height
    })
    this.pageAdapt.resize()
    // 结束loading
    document.getElementById('appLoading').style.display = 'none'
  },
  methods: {
    init() {
      partServer.getCompByTagName('anovPage')[0].enter()
      this.$router.beforeResolve((to, from, next) => {
        this.$emit('pageEnter', { to, from, next })
      })
      this.$router.beforeEach((to, from, next) => {
        this.$emit('pageLeave', { to, from, next })
      })
      this.$on('pageEnter', e => {
        partServer.getCompByTagName('anovPage')[0].enter(e)
      })
      this.$on('pageLeave', e => {
        partServer.getCompByTagName('anovPage')[0].leave(e)
      })
    }
  },
  components: {}
}
</script>
<style lang="scss" scoped>
#sys {
  height: 100%;
  flex: 1;
  position: relative;
  background: #181e24;
  background-size: cover;
}
#app {
  position: absolute;
  box-sizing: border-box;
  background: #ddd;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.main {
  position: absolute;
  box-sizing: border-box;
}
#top-menu {
  position: relative;
  z-index: 10;
}
</style>
